import { useState } from "react";
//防抖的定时器变量
let debounceTimeout = null;
const TodoInput = (props) => {

    //解构父组件传递下来的状态
    let { value, setContent, add } = props;
    let [iptVal, setIptVal] = useState("")
    //点击按钮的处理函数
    const handleSubmit = () => {
        add()
        setIptVal("")
    }
    // 输入发生变化的时候处理函数
    const handleInputChange = (e) => {
        setIptVal(e.target.value)
        if (debounceTimeout) {
            clearTimeout(debounceTimeout)
        }
        debounceTimeout = setTimeout(() => {
            setContent(e.target.value)
        }, 300)
    }
    return (
        <div className="todoinput">
            <div className="todoinputs">
                <input type="text" value={iptVal} onChange={handleInputChange} placeholder="添加事件"  />
            </div>
            <button onClick={handleSubmit} type="submit" className="todoinput-btn"><span>提交</span></button>
        </div>
    )
}

export default TodoInput